<template>
  <div class="authoBox">
    <div class="infoBox" style="margin-bottom: 10px;">
      <div class="header"><span>授权信息</span></div>
      <div class="autoin" style="padding-top:20px"><span>授权到期：</span>{{ expire }}</div>
      <div class="autoin" style="padding-bottom:20px"><span>序列号：</span>{{ serialNumber }}</div>
    </div>
    <div class="infoBox">
      <div class="header"><span>上传授权</span></div>
      <div class="upLoadLine" style="padding-top:20px;padding-bottom:20px">
        <el-upload 
          ref="uploadRef" 
          :action="uploadUrl"  
          :headers="upHeaders"
          :limit="1"        
          :on-change="handleFileChange" 
          :on-success="handleUploadSuccess"  
          :on-error="handleUploadError"    
          :on-progress="handleUploadProgress" 
          :file-list="fileList" 
          :before-upload="beforeUpload"  
          :auto-upload="false"  
        > 
          <el-button plain class="upload-small-btn">选择授权文件</el-button>
        </el-upload>
        <el-button type="primary" @click="handleManualUpload" :disabled="!canUpload" style="margin-top: 20px;">上传</el-button>
        <div style="margin-top: 8px; font-size: 14px; color: #666;">
          仅支持 .lic 格式的授权文件
        </div>

      </div>
    </div>
  </div>
</template>


<script>
import { getAuthInfo } from '@/api/main'
import { getToken } from '@/utils/auth'
export default {
  name: 'Authorize',
  
  data() {
    return {
      uploadUrl: this.$API_BASE_URL + '/system/license/upload_license',
      upHeaders: { Authorization: 'Bearer ' + getToken() },
      expire:'',
      serialNumber:'',
      fileList:[],
      uploadProgress: 0,     // 上传进度(0-100)
      canUpload: false       // 是否可以上传（有选中文件且未上传）

    }
  },
  created() {
    this.getAuthInfo()
  },
  methods: {
    getAuthInfo(){
      getAuthInfo().then(response => {
        console.log('----------response',response)
        this.expire = response.data.expire === '' ? '永久' : response.data.expire
        this.serialNumber = response.data.serialNumber
      }).catch(error => {
        console.error('获取授权信息失败', error)
      })
    },
    // 文件选择/状态变化时
    handleFileChange(file, fileList) {
      this.fileList = fileList
      console.log('----------fileList',fileList)
      // 有选中文件且未上传成功时，允许点击上传按钮
      this.canUpload = fileList.length > 0
    },

    // 上传前校验
    beforeUpload(file) {
      this.upHeaders['Authorization'] = 'Bearer ' + getToken()
      // 校验文件格式
      const isLic = file.name.endsWith('.lic')
      if (!isLic) {
        this.$message.error('请上传 .lic 格式的授权文件！')
        return false
      }

      // 校验文件大小（10MB）
      // const isLt10M = file.size / 1024 / 1024 < 10
      // if (!isLt10M) {
      //   this.$message.error('授权文件大小不能超过 10MB！')
      //   return false
      // }

      return true  // 校验通过，允许上传
    },

    // 手动触发上传
    handleManualUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择授权文件！')
        return
      }
      // 调用上传组件的上传方法
      this.$refs.uploadRef.submit()
    },

    // 上传进度
    handleUploadProgress(event, file, fileList) {
      this.uploadProgress = Math.floor(event.percent)  // 计算进度百分比
    },

    // 上传成功
    handleUploadSuccess(response, file, fileList) {
      this.uploadProgress = 0  // 重置进度
      if (response.code === 20000) {  // 假设后端成功状态码为20000
        this.$message.success('授权文件上传成功！')
        // 可以在这里触发授权刷新逻辑
        // this.$emit('refreshAuth')  // 通知父组件刷新授权信息
        // this.getAuthInfo()
        setTimeout(() => {
          window.location.reload()
        }, 1000)  // 延迟1.5秒，让用户看到成功提示
      } else {
        this.$message.error(`上传失败：${response.msg || '未知错误'}`)
      }
    },

    // 上传失败
    handleUploadError(error, file, fileList) {
      this.uploadProgress = 0  // 重置进度
      this.$message.error('上传失败，请检查网络或联系管理员！')
      console.error('上传错误详情：', error)
    }
  }

}
</script>

<style>
.authoBox{
    padding:40px;
}
.infoBox{
  flex: 1;
  border:1px solid #dfe6ec;
}
.infoBox .header{  
  display: flex;
  height: 54px;
  background: #ffff;
  border-bottom: 1px dashed #ddd;
  align-items: center;
  padding-left: 18px;
}
.infoBox .header span{  
  border-left: 5px solid #144fb4;
  padding-left: 7px;
}
.autoin{
    background: #fff;
    padding:10px 40px;
    font-size: 14px;
    color: #333;
}
.autoin span{
    margin-right: 10px;
}
.upLoadLine{
    background: #fff;
    padding:20px 40px;
}
.fileName{
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}
.upLoadLine .el-upload{
  display: flex;
  align-items: center;
}
.upLoadLine .el-upload-list{
  width: 50%;
  min-width: 300px;
}
</style>